<template>
  <div class="box">
    <div class="commonHeader">
      社区信息
    </div>
    <div class="content">
      <div
        class="data-box"
        style="height:100%"
      >
        <div class="line-box">
          <i class="t-l-line"></i>
          <i class="l-t-line"></i>
        </div>
        <div class="line-box">
          <i class="t-r-line"></i>
          <i class="r-t-line"></i>
        </div>
        <div class="line-box">
          <i class="b-l-line"></i>
          <i class="l-b-line"></i>
        </div>
        <div class="line-box">
          <i class="b-r-line"></i>
          <i class="r-b-line"></i>
        </div>
        <div class="inner-box">
          <template v-for="item of communityInfoList">
            <div
              class="info-box "
              :key="item.id"
            >
              <p class="title item">{{ item.title }}</p>
              <p class="message item">{{ item.introduction }}</p>
              <p class="bottom-bar item">
                <span>发布时间：{{ item.publishTime }} </span>
                <span>类型：{{ item.type }}</span>
              </p>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/api'
export default {
  data() {
    return {
      communityInfoList: [],
      total: '',
      timer: ''
    }
  },
  mounted() {
    this.getCommunityInfoList()
    this.timer = setInterval(() => {
      this.getCommunityInfoList()
    }, 60000)
  },
  methods: {
    async getCommunityInfoList() {
      let params = { pageNumber: 1, pageSize: 100 }
      let data = await api.getCommunityInfoList(params)
      let list = data.list
        .map(item => {
          item.time = new Date(item.publishTime).getTime()
          return item
        })
        .sort((a, b) => b.time - a.time)
      this.communityInfoList = list
      if (this.communityInfoList.length > 4) {
        this.communityInfoList = this.communityInfoList.slice(0, 4)
      }
      this.total = data.total
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>
<style lang="less" scoped>
.box {
  height: 60%;
  .content {
    padding-top: 0.5rem;
    box-sizing: border-box;
    height: calc(100% - 2rem);
    .inner-box {
      box-sizing: border-box;
      padding: 0.5rem 1rem;
      height: 100%;
      overflow: hidden;
    }
    .info-box {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 25%;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(51, 153, 255, 0.5);
      .item {
        margin: 0.6rem 0;
      }
      .title {
        font-size: 14px;
        font-weight: 700;
      }
      .message {
        font-size: 12px;
        font-weight: 300;
        line-height: 18px;
      }
      .bottom-bar {
        display: flex;
        justify-content: space-between;
        opacity: 0.6;
        font-size: 12px;
      }
    }
  }
}
</style>
